<script setup lang="ts">
import { iconMap, renderIconByName } from "@ys-lib/naive-ui";
import { NGrid, NGi, NSpace, NIcon } from "naive-ui";
import BackCard from "../../block/BackCard.vue";
import { LoggerUtil } from "@ys-lib/ts";

const logger = LoggerUtil.getLogger("ex.components.mate.instance-test");

logger(iconMap);
</script>

<template>
  <BackCard>
    <NGrid cols="720:6 2" x-gap="16" y-gap="16">
      <NGi v-for="key in iconMap.keys()" :key="key">
        <NSpace justify="center" vertical align="center">
          <!-- 可以 直接使用 component 去显示 ICON -->
          <!--          <component :is="renderIconByName(key)"></component>-->
          <NIcon size="40" :component="renderIconByName(key)"> </NIcon>
          <div>{{ key }}</div>
        </NSpace>
      </NGi>
    </NGrid>
  </BackCard>
</template>

<style scoped></style>
